<template>
  <div>
    <el-form :inline="true" class="search-form" label-width="100px" size="medium" >
      <el-form-item label="所属市场：">
        <el-select v-model="res.params.marketId" placeholder="请选择市场" clearable >
          <el-option v-for="option in res.marketOptions" :key="option.marketId" :value="option.marketId" :label="option.marketName" ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item >
        <el-button type="primary" size="medium" icon="el-icon-search" @click="searchClick" >查询</el-button>
      </el-form-item>
    </el-form>
    <el-table :data="res.tableOptions" size="medium" border  class="imp-table"  v-loading="res.loading" >
      <el-table-column label="缩略图" prop="rotationImage" width="170">
        <template slot-scope="scope">
          <img :src="imageUrl + scope.row.rotationImage + '.r_150xh_100'" onerror="javascript:this.src='static/images/default.svg'" />
        </template>
      </el-table-column>
      <el-table-column label="图片信息" prop="rotationName" >
        <template slot-scope="scope">
          <p>图片名称：{{scope.row.rotationName}}</p>
          <p>所属市场：{{scope.row.market.marketName}}</p>
        </template>
      </el-table-column>
      <el-table-column label="图片链接" prop="rotationUrl" ></el-table-column>
      <el-table-column label="排序" prop="rotationSeq"  align="center" width="80"></el-table-column>
      <el-table-column label="状态"  align="center" width="80">
      	<template slot-scope="scope">
      	  <el-tag :type="scope.row.rotationState==1?'success':'warning'">{{scope.row.rotationState|filterRotationState}}</el-tag>
      	</template>
      </el-table-column>
      <el-table-column label="操作" width="200" align="center" >
      	<template slot-scope="scope">
      	  <el-button type="primary" size="small" @click="editChick(scope.row)" >编辑</el-button>
          <el-button v-if="scope.row.rotationState==1" size="small"  @click="revoke(scope.row, false)" >撤销</el-button>
          <el-button v-else size="small" @click="revoke(scope.row, true)" >恢复</el-button>
      	</template>
      </el-table-column>
    </el-table>
    <div class="footer">
      <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange" :page-size="res.params.pageSize" layout="total, sizes, prev, pager, next, jumper" :total="pageTotal">
      </el-pagination>
    </div>
  </div>
</template>

<script>
  export default {
    data () {
      return {
        pageSize: 10,
        pageTotal: 0,
        imageUrl: window.imageUrl,
        res: {
          marketOptions: [],
          tableOptions: [],
          loading: true,
          params: {
            marketId: this.$marketId,
            pageSize: 10,
            pageIndex: 1
          },
          pageTotal: 0
        }
      }
    },
    created () {
      this.$store.commit('getMarketOptions', this.res)
    },
    methods: {
      handleSizeChange (val) {
        this.res.params.pageSize = val
        this.searchClick()
      },
      handleCurrentChange (val) {
        this.res.params.pageIndex = val
        this.searchClick()
      },
      revoke (obj, bool) {
        this.$confirm('此操作将修改图片状态, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.$axios.get(this.$api.updateRotationState, {params: {
            rotationId: obj.rotationId,
            rotationState: bool ? 0 : 1
          }}).then(res => {
            if (res) {
              this.$message({
                message: '修改成功',
                type: 'success'
              })
              obj.rotationState = !obj.rotationState
            }
          })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消修改'
          })
        })
      },
      searchClick () {
        this.res.loading = true
        this.$axios.get(this.$api.getRotationList, {params: this.res.params}).then(res => {
          this.res.tableOptions = res.data.result
          this.res.loading = false
        })
        this.$axios.get(this.$api.getRotationListNum, {params: this.res.params}).then(res => {
          this.pageTotal = res.data.result.total
        })
      },
      editChick (obj) {
        this.$router.push('/banner/add/' + obj.rotationId)
      }
    },
    activated () {
      this.searchClick()
    },
    deactivated () {
    }
  }
</script>
